<template>
    <div class="helpCenter">
        <div class="topimg marginBt" ref="swiperContent">
        </div>
        <div class="page-wapper marginBt">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">摄影师入驻</h2>
            </div>
            <ul class="textBox">
                <li>入驻平台获得拍摄订单</li>
                <li>推荐新人购买，获取奖金分红</li>
                <li>后台专业剪辑师实时出片，提升用户满意度</li>
                <li>另有商业直播平台，满足企业直播活动需求</li>
            </ul>
        </div>
        <div class="page-wapperMin marginBt">
            <div class="minPicBox">
                <ul class="imgLi">
                    <li v-for="(item, index) in photographerIn" :key="index"  style="position:relative;">
                        <div class="imgShadow">
                            <img class="miniImg" :src="item.imgSrc" alt="">
                        </div>
                        <p class="text">{{item.text}}</p>
                        <div class="dashedStyle" v-if="index !== photographerIn.length-1"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="play-video">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">培训视频在线考试</h2>
            </div>
            <video id = "video"
                autoplay = "true"
                src = "http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/7888e9f711bc47178f33af7203a13189.mp4"
                controls = "true"
                preload = "auto"
                webkit-playsinline = "true"
                playsinline = "true">
            </video>
        </div>
        <div class="JoinPhone marginBt">
            <h3 class="title">入驻热线</h3>
            <p class="phone">400-969-9192</p>
        </div>
        <div class="searchbox marginBt">
            <input class="searchinput" type="text" placeholder="请输入问题关键字进行搜索">
        </div>
        <div class="help-text paddingBt">
            <div class="help-box" v-for="(item, index) in helpArr" :key="index">
                <h3 class="title">{{item.title}}</h3>
                <ul class="textlist">
                    <li class="text" v-for="(item1, index1) in item.list" :key="index1">
                        <a href="#">{{item1}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { config } from 'common/js/config';
export default {
    data() {
        return {
            helpArr: config.helpArr,
            photographerIn: config.photographerIn // 摄影师入驻
        };
    },
    methods: {
        initial() {
            let wh = window.innerWidth;
            if (wh >= 768 && wh < 1400 && wh !== 828) {
            // PC端 宽度比例90%
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else if (wh < 768 || wh === 828) {
            // 移动设备 828单独适配plus
                this.$refs.swiperContent.style.height = 1.7786 * wh + 'px';
            } else if (wh >= 1400 && wh < 1920) {
                // PC大屏 固定宽度
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else {
                this.$refs.swiperContent.style.height = '860px';
            }
        }
    },
    mounted() {
        this.initial();
        window.addEventListener('resize', this.initial);
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.helpCenter
    .topimg
        background url("http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/0a77a2e48bdd4b5ca5b0d8dd67d05fd3.png") no-repeat left top
    .searchbox
        width 800px
        margin 0 auto 40px
        .searchinput
            width 100%
            height 50px
            background url("~common/image/search.png") 15px no-repeat rgba(255,255,255,1)
            box-shadow 0px 0px 30px 0px rgba(255,149,139,0.3)
            border-radius 44px
            text-indent 45px
    .play-video
        text-align center
        #video
            width 100%
    .help-text
        width 600px
        margin 0 auto
        .help-box
            text-align center
            margin-top 50px
            h3.title
                width 70px
                margin 0 auto
                font-size 16px
                font-family PingFangSC-Medium
                font-weight 600
                color rgba(51,51,51,1)
                line-height 25px
                border-bottom 3px solid #FF958B
            ul.textlist
                margin-top 30px
                .text
                    a
                        font-size 14px
                        font-family PingFangSC-Regular
                        font-weight 400
                        color rgba(102,102,102,1)
                        line-height 30px
                        color #666
                        cursor pointer
@media screen and (max-width 1300px)
    .helpCenter
        .searchbox
            width 700px
            margin 0 auto 30px
            .searchinput
                height 40px
        .help-text
            margin 0 auto
            .help-box
                margin-top 50px
                ul.textlist
                    margin-top 25px
@media screen and (max-width 900px)
    .helpCenter
        .searchbox
            width 570px
            margin 0 auto
            .searchinput
                height 35px
        .help-text
            margin 0 auto
            .help-box
                margin-top 30px
                ul.textlist
                    margin-top 20px
@media screen and (max-width 767px)
    .helpCenter
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
        .searchbox
            width 7.7333rem
            .searchinput
                height 0.6667rem
                border-radius 0.5867rem
                text-indent 0.6rem
        .help-text
            width 8rem
            .help-box
                margin-top 0.6667rem
                h3.title
                    width 1.2rem
                    font-size 0.2133rem
                    line-height 0.3333rem
                    border-bottom 3px solid #FF958B
                ul.textlist
                    margin-top 0.4rem
                    .text
                        a
                            font-size 0.1867rem
                            font-weight 400
                            line-height 0.6rem
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    .helpCenter
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
        .searchbox
            width 7.7333rem
            .searchinput
                height 0.6667rem
                border-radius 0.5867rem
                text-indent 0.6rem
        .help-text
            width 8rem
            .help-box
                margin-top 0.6667rem
                h3.title
                    width 1.2rem
                    font-size 0.2133rem
                    line-height 0.3333rem
                    border-bottom 3px solid #FF958B
                ul.textlist
                    margin-top 0.4rem
                    .text
                        a
                            font-size 0.1867rem
                            font-weight 400
                            line-height 0.6rem
</style>
